<template>
  <GlobalContainer className="!bg-[#fff]" :backgroundImage="`${OSS_URL}/images/tousu/head_bg.png`">
    <GlobalHeader title="投诉建议" :fixed="true" showBack :backgroundImage="`${OSS_URL}/images/tousu/head_bg.png`" />

    <div class="mb-140 flex min-h-full flex-col bg-white p-40">
      <div class="home-no mb-42 flex items-center">
        <image src="../../static/images/tousu/home_icon.png" class="mr-16 size-64" />
        <div class="home-title text-34 leading-50 text-[#303133]">{{ accountStore.roomInfo }}</div>
      </div>

      <div class="form-c">
        <div class="title">详情描述</div>
        <div class="text-area mt-18 px-24">
          <wd-textarea
            v-model="inputValue"
            custom-class="!bg-[#F5F7FA]"
            custom-textarea-container-class="!bg-[#F5F7FA]"
            custom-textarea-class="!bg-[#F5F7FA]"
            placeholder="请输入问题的详情，以便我们更好的处理"
            :maxlength="200"
            show-word-limit
          />
        </div>

        <div class="upload mt-40">
          <ImageUpload :fileList="fileList" :max="9" @fileListChange="fileListChange" />
        </div>
        <div class="mt-20 text-24 text-[#909399]">此投诉为本小程序自有投诉渠道，非微信官方投诉渠道</div>

        <div class="btn-c px-30 py-20 pb-safe">
          <div class="btn" @click="submit">提交</div>
        </div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from '@/utils/message'
import { useAccountStore } from '@/store/modules/account'
import { submitFeedback } from '@/common/api/report'
import ImageUpload from '@/components/imageUpload/index.vue'

const OSS_URL = import.meta.env.VITE_OSS_URL
const accountStore = useAccountStore()

const fileList = ref([])
const inputValue = ref('')

const fileListChange = (list: any) => {
  fileList.value = list
}

const submit = () => {
  console.log('submit')
  if (!inputValue.value) {
    showToast('请输入详细描述')
    return
  }
  const params = {
    content: inputValue.value,
    images: fileList.value.join(','),
    communityId: accountStore.currentRoom.communityId
  }
  submitFeedback(params).then(data => {
    if (data) {
      showToast('提交成功')
      uni.navigateBack()
    }
  })
}
</script>
<style scoped lang="scss">
.text-area {
  background: #f5f7fa;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 1px solid #dcdfe6;
}
.text-area :deep(.wd-textarea__count) {
  background-color: #f5f7fa;
}
.upload-item {
  background: #fafafa;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 1px solid #dcdfe6;
}
.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
  .btn {
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
